<template>
	<view>
		<view class="pr top">
			<image src="/static/image/wallet_bg.png" mode="widthFix" style="width: 750rpx;" class="pa"></image>
			<view class="pa title">
				<view class="tips1">可提现余额</view>
				<view class="tips2">总资产</view>
			</view>
			<view class="pa balance">￥{{amount}}</view>
		</view>

		<view class="centent">
			<view class="title">
				提现金额
			</view>
			<view class="ul dis aic ">
				<view class="">
					<u--input placeholder="请输入提现金额" border="surround" type="number"
						v-model="withdrawalAmount"></u--input>
				</view>

			</view>
			<view class="title">
				点击提现
			</view>
			<view class="ul dis aic " @click="Withdrawal">
				<view class="wx_li dis aic jcc">
					<image src="/static/image/wx_logo.png" mode="widthFix" style="width:36rpx;margin-right: 10rpx;">
					</image>
					<view class="wx">微信</view>
				</view>
			</view>
			<view class="tips_title">
				提现说明
			</view>
			<view class="tips_centent">
				平台抽取跑腿订单交易额的10%作为手续费，上方显示可提现金额为扣除手续费后余额，感谢理解
			</view>
		</view>
		<view class="btns dis aic jcsb">
			<view :class="[index == 0 ? 'btn_left' : 'btn_right']" @click="changeIndex(0)">
				账单明细
			</view>
			<view :class="[index == 1 ? 'btn_left' : 'btn_right']" @click="changeIndex(1)">
				提现记录
			</view>
		</view>
		<scroll-view @scrolltolower="handleScrollToLower" class="details" scroll-y :lower-threshold="300"
			v-if="list.length> 0">

			<view class="li dis aic jcsb" v-for="(item,index) in list" :key="index">
				<view>
					<view class="title">{{item.remark}}</view>
					<view class="time">{{item.createTime}}</view>
				</view>
				<view class="price">{{item.amount>0 ? '+' : ''}}{{item.amount}}</view>
			</view>
		</scroll-view>
		<view class="none" v-else>
			<image src="/static/image/data_none.png" mode="widthFix" style="width: 260rpx;margin: 0 auto;"></image>
		</view>
	</view>
</template>

<script>
	import {
		getMemberInfo,
		memberWithdraw,
		memberGetTicket,
		helpOrderConfirmWithdraw,
		memberBillDetails
	} from '@/api.js'
	import wx from 'weixin-js-sdk'
	export default {
		data() {
			return {
				amount: 5,
				withdrawalAmount: 0,
				index: 0,
				list: [],
				pageNo: 1,
				pageSize: 10,
				total: 0,
			}
		},
		onShow() {
			this.init()

		},
		watch: {
			withdrawalAmount(newVal) {
				this.$nextTick(() => {
					const numValue = parseFloat(newVal) || 0;
					console.log('numValue', numValue);
					if (numValue > 200) {
						this.withdrawalAmount = 200; // 超过时重置为最大值
					}
				})
			}
		},
		methods: {
			// handleInput(value) {
			// 	const numValue = parseFloat(value) || 0;
			// 	this.withdrawalAmount = Math.min(numValue, 200); // 超过200自动修正
			// },
			handleScrollToLower() {
				let pageNo = this.pageNo
				let pageSize = this.pageSize
				let total = this.total
				console.log('一共' + total + '条，当前已经加载' + pageSize * pageNo + '条');
				if (total <= pageNo * pageSize) {
					console.log('已经到底了');
					return
				}
				uni.showLoading({
					title: '加载中'
				});
				this.pageNo++;
				this.getMemberBillDetails();
				uni.hideLoading();
			},

			changeIndex(index) {
				this.index = index
				this.pageNo = 1
				this.pageSize = 10
				this.total = 0
				this.list = []
				this.getMemberBillDetails()
			},
			changeAmount(amount) {
				this.amount = amount
			},
			init() {
				this.getUserDetail()
				this.getMemberBillDetails()
			},
			// 获取流水
			async getMemberBillDetails() {
				let res = await memberBillDetails({
					isWithdraw: this.index
				})
				if (res.code == 200) {
					this.list = this.list.concat(res.result.records)
					this.total = res.result.total
				}

			},
			async getUserDetail() {
				let res = await getMemberInfo()
				if (res.code == 200) {
					this.amount = res.result.amount
				}

			},
			async Withdrawal() {
				uni.showLoading({
					mask: true
				})
				if (this.withdrawalAmount && this.withdrawalAmount != '') {
					const res = await memberWithdraw({
						amount: this.withdrawalAmount,
					});
					if (res.code == 200) {
						console.log('提现返回结果', res.result);
						if (res.result && res.result.package_info) {
							this.ConfirmPay(res.result.orderNo, res.result.package_info)
						} else {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: res.message,
								duration: 2000,
							});
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
							this.init()
						}
					} else if (res.code == 500) {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入提现金额'
					})
					uni.hideLoading()
				}


			},
			// 获取签名
			async gtf() {
				let url = location.href.split('#')[0]
				const res = await memberGetTicket({
					url: url
				})
				return res.result
			},
			async sendState(o) {
				let res = await helpOrderConfirmWithdraw(o)
				console.log('这个是扣钱返回', res);

			},

			async ConfirmPay(o, p) {
				let that = this
				let gtf = await this.gtf()

				console.log('gtf', gtf);
				wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: 'wxddc10ac093d2af63', // 必填，公众号的唯一标识
					timestamp: gtf.timestamp, // 必填，生成签名的时间戳
					nonceStr: gtf.nonceStr, // 必填，生成签名的随机串
					signature: gtf.signature, // 必填，签名
					jsApiList: ['requestMerchantTransfer'] // 必填，需要使用的JS接口列表
				});
				wx.ready(function() {
					console.log('进入rady');
					wx.checkJsApi({
						jsApiList: ['requestMerchantTransfer'],
						success: function(res) {
							if (res.checkResult['requestMerchantTransfer']) {
								WeixinJSBridge.invoke('requestMerchantTransfer', {
										mchId: '1716189313',
										appId: 'wxddc10ac093d2af63',
										package: p,
									},
									function(ress) {
										console.log('ress', ress);
										if (ress.err_msg === 'requestMerchantTransfer:ok') {
											uni.hideLoading()
											that.sendState(o) //调用这个方法扣款
											uni.$emit('refreshData', {});
											uni.navigateBack({
												delta: 1,
											});

										}
									}
								);
							} else {
								uni.hideLoading()
								alert('你的微信版本过低，请更新至最新版本。');
							}
						}
					});
				});
				wx.error(function(res) {
					console.log('111', res);

				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.top {
		width: 750rpx;
		height: 300rpx;
	}

	.title {
		top: 55rpx;
		left: 70rpx;
		margin: 10rpx 0;

		.tips1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 38rpx;
			color: #FFFFFF;
			line-height: 44rpx;
		}

		.tips2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 44rpx;
		}


	}

	.balance {
		width: 450rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 48rpx;
		color: #FFFFFF;
		line-height: 44rpx;
		top: 145rpx;
		left: 150rpx;
		text-align: center;
	}

	.centent {
		width: 690rpx;
		margin: 0 auto;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 33rpx;
			color: #1D1D1F;
			margin-bottom: 40rpx;
		}

		.ul {
			.li {
				width: 217rpx;
				height: 94rpx;
				line-height: 94rpx;
				background: #F6F6F6;
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 31rpx;
				color: #000000;
				text-align: center;
				margin-right: 18rpx;
			}

			.lic {
				width: 217rpx;
				height: 94rpx;
				line-height: 94rpx;
				background: #F9EA69;
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 31rpx;
				color: #FFFFFF;
				text-align: center;
				margin-right: 18rpx;
			}

			.wx_li {
				width: 100%;
				height: 94rpx;
				line-height: 94rpx;
				background: #F6F6F6;
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 31rpx;
				color: #000000;
				text-align: center;
				margin-right: 18rpx;
			}

			.wx {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 31rpx;
				text-align: center;
			}
		}

		.tips_centent {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #666666;
			line-height: 45rpx;
		}

		.tips_title {
			margin: 20rpx 0 24rpx 0;
			font-weight: 700;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 26rpx;
			color: #666666;
			line-height: 45rpx;
		}

	}

	.btns {
		width: 690rpx;
		margin: 24rpx auto;

		.btn_left {
			width: 330rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background: #F9EA69;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #FFFFFF;
		}

		.btn_right {
			width: 330rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background: #F6F6F6;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #000000;
		}
	}

	.none {
		width: 690rpx;
		margin: 80rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.details {
		width: 690rpx;
		margin: 20rpx auto;
		max-height: 1000rpx;

		.li {
			margin-bottom: 30rpx;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				line-height: 45rpx;
			}

			.time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #8B8B8B;
				line-height: 45rpx;
			}

			.price {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #EB4D41;
				line-height: 45rpx;
			}
		}
	}
</style>